<template>
  <div
    aria-labelledby="headlessui-menu-button-18"
    id="headlessui-menu-items-19"
    role="menu"
    tabindex="0"
    class="origin-top-right absolute right-0 mt-2 w-64 rounded-md shadow bg-white ring-1 ring-black ring-opacity-5 focus:outline-none overflow-hidden pt-2"
    v-show="visible == true"
  >
    <router-link
      to="/user-center/account"
      class="px-4 py-4 flex"
      disabled="false"
      id="headlessui-menu-item-20"
      role="menuitem"
      tabindex="-1"
      ><img
        :src="userinfo.avatar"
        class="rounded-full w-10 h-10 flex-shrink-0 mr-7"
      />
      <div>
        <div
          class="balance flex items-center text-black-70 font-semibold relative select-none"
          data-v-b61a85bc=""
        >
          <div class="flex flex-col" data-v-b61a85bc="">
            <span class="text-sm" data-v-b61a85bc=""
              ><span data-v-b61a85bc="">{{ userinfo.nickname }}</span></span
            ><span class="text-variants-primary" data-v-b61a85bc=""
              >Ł <span data-v-b61a85bc="">{{ userinfo.money }}</span></span
            >
          </div>
          <!---->
        </div>
      </div>
    </router-link>
    <div
      @click="toPath(item)"
      aria-current="page"
      class="router-link-active router-link-exact-active flex items-center px-[30px] py-2.5 text-sm"
      disabled="false"
      id="headlessui-menu-item-21"
      role="menuitem"
      tabindex="-1"
      v-for="(item, index) in arr"
      style="cursor: pointer"
    >
      <img class="mr-8 h-5 w-5 text-black-70" :src="item.img" /><span>{{
        item.title
      }}</span>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  props: ["visible"],
  data() {
    return {
      arr: [
        {
          title: "Top up",
          img: "https://www.lucksec.cn/img/topup.c7d8624a.svg",
          event: "recharge",
        },
        {
          title: "Profile",
          img: "https://www.lucksec.cn/img/user.f071128b.svg",
          path: "/user-center/account",
        },
        {
          title: "Inventory",
          img: "https://www.lucksec.cn/img/inven.353d40d6.svg",
          path: "/user-center/inventory",
        },
        {
          title: "Promotion history",
          img: "https://www.lucksec.cn/img/badge.433c65ca.svg",
          path: "/my-refer",
        },
        {
          title: "Topup history",
          img: "https://www.lucksec.cn/img/dollar.254c210f.svg",
          path: "/user-center/trade-history",
        },
        {
          title: "Notifications",
          img: "https://www.lucksec.cn/img/bell.8a28b736.svg",
          path: "/notifications",
        },
        {
          title: "Log out",
          img: "https://www.lucksec.cn/img/logout.e2610127.svg",
          event: "out",
        },
      ],
    };
  },
  computed: {
    ...mapState({
      userinfo: (state) => state.user.userinfo,
    }),
  },
  methods: {
    ...mapMutations({
      setUserinfo: "user/setUserinfo",
      changePayModal: "user/changePayModal",
    }),
    toPath(item) {
      if (item.event) {
        this[item.event]();
      } else {
        if (this.$route.path == item.path) {
          return;
        }
        this.$router.push(item.path);
      }
    },
    out() {
      this.$api.logout().then((res) => {
        localStorage.removeItem("token");
        localStorage.removeItem("userinfo");
        this.setUserinfo({});
      });
    },
    recharge() {
      this.changePayModal(true);
    },
  },
};
</script>
<style lang="" scoped></style>
